<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        总结
        vue语法分为两大类
        语法1：插值语法
            功能：用于解析标签体内容
            {{xxx}} xxx使js 表达式 且可以读取到data中的所有属性
        语法2：指令语法
            功能：用于解析标签（包括标签属性，标签体内容，绑定事件...）
            举例：v-bind: 简写 :href='XXX' xxx 为js表达式  v-bind 为单向绑定 数据变html内容变 html内容变 数据不会发生改变
            备注：vue中有很多指令 形式都是v-??? 如v-if,v-model,v-show
     -->
    <div id="root">
        <h1>hello {{name}}</h1>
        <h1>年龄: {{age}}</h1>
        <a v-bind:href="url" :x="hello">跳转</a>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', //el用于指定Vue实例为那个容器服务,通常为css选择器 也可以document.querySelector('#root')
        data:{ //用于存储数据,数据提供给el所指定的容器使用
            name:'黎伟华',
            age:18,
            url:'https://www.baidu.com'
        }
    })

</script>
</html>